<template>
  <div class="footer-contact">
    <!--关于我们-->
    <div class="AboutUs">
      <div class="about-us">
        <el-form label-width="150px" label-position="right"  style="width:550px;">
          <el-form-item label="客服电话">
            <el-input v-model="aboutOur.phone"></el-input>
          </el-form-item>
          <el-form-item label="工作时间">
            <el-input v-model="aboutOur.workTime"></el-input>
          </el-form-item>
          <el-form-item label="企业邮箱">
            <el-input v-model="aboutOur.comEmail"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="aboutOur.comAddrees"></el-input>
          </el-form-item>
          <el-form-item label="二维码名称">
            <el-input v-model="aboutOur.codeName1"></el-input>
          </el-form-item>
          <el-form-item>
            <template slot-scope="scope" >
              <div class="tabImg" >
                <el-upload
                        action="/projectName/company/getPicAddress.do"
                        list-type="picture-card"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="changHandle1">
                  <img v-if="aboutOur.codeImage1" :src="aboutOur.codeImage1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </template>

          </el-form-item>
          <el-form-item label="二维码名称">
            <el-input v-model="aboutOur.codeName2"></el-input>
          </el-form-item>
          <el-form-item>

            <template slot-scope="scope" >
              <div class="tabImg" >
                <el-upload
                        action="/projectName/company/getPicAddress.do"
                        list-type="picture-card"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="changHandle2">
                  <img v-if="aboutOur.codeImage2" :src="aboutOur.codeImage2" >
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </template>

          </el-form-item>
          <el-form-item>
            <el-button size="small" class="btn ML" type="primary" @click="save2">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import upload from '../../../components/upload'
export default {
  data() {
    return {
      aboutOur:{
        phone:"",
        workTime:"",
        comEmail:"",
        comAddrees:"",
        codeName1:"",
        codeImage1:"",
        codeName2:"",
        codeImage2:"",
      },
      nameId:-1,
    }
  },
  methods: {
    save2() {
      let url = this.nameId == -1?'/platform/addStaticData.do':'/platform/updateStaticData.do';
      let json = JSON.stringify(this.aboutOur);
      console.log(url)
      this.lAxios({
        method: 'post',
        url:url,
        params:{
          id:this.nameId,
          content:json,
          typeId:20,
          num:1,
        },
      }).then(res=>{
        if(res.data.status == 0){
          this.$message.success('操作成功!');
        }else {
          this.$message.error('操作失败!');
        }
      })


    },
    changHandle1(file){
      console.log(this.row)
      var data = new FormData();
      data.append('file', file.raw);
      this.lAxios({
        method: 'post',
        url:'/platform/getPicAddress.do',
        data,
        headers: {'Content-Type': false}
      }).then(res=>{
        if(res.data.status == 0){
          this.aboutOur.codeImage1 =  res.data.data;
        }
      })
    },
    changHandle2(file){
      console.log(this.row)
      let data = new FormData();
      data.append('file', file.raw);
      this.lAxios({
        method: 'post',
        url:'/platform/getPicAddress.do',
        data,
        headers: {'Content-Type': false}
      }).then(res=>{
        if(res.data.status == 0){
          this.aboutOur.codeImage2 =  res.data.data;
        }
      })
    },
    initData(){
      this.lAxios({
        method: 'post',
        url:'/platform/selectStaticData.do',
        params:{
          state:'20',
        }
      }).then(res=>{
        if(res.data.status == 0){
          let data = res.data.data["20"];
          this.nameId = data[0].id;
          this.aboutOur = JSON.parse(data[0].content);
        }else{
          this.nameId = -1;
        }
      })
    }

  },

  components: {
    upload
  },
  created() {
    this.initData();
  }
}
</script>

<style  lang="scss" scoped>
.footer-contact {
  padding: 100px 0;
  .about-us {
    display: flex;
    justify-content: center;
  }
}
.tabImg{
  width: 150px;
  height:150px ;
  overflow: hidden;
  img{
    width:100%;
  }
}
</style>
